<template>
  <view class="other-fees-page">
    <!-- 页面头部 -->
    <view class="page-header">
      <view class="header-title">其他费用</view>
      <view class="header-subtitle">缴纳其他社区费用</view>
    </view>

    <!-- 费用分类 -->
    <view class="fee-categories">
      <view class="section-title">
        <text class="title-text">费用分类</text>
      </view>
      
      <view class="category-grid">
        <view 
          v-for="category in feeCategories" 
          :key="category.id"
          class="category-item"
          @click="selectCategory(category)"
        >
          <view class="category-icon" :style="{ background: category.color }">
            <u-icon :name="category.icon" color="#fff" size="24"></u-icon>
          </view>
          <text class="category-name">{{ category.name }}</text>
          <text class="category-count">{{ category.count }}项</text>
        </view>
      </view>
    </view>

    <!-- 待缴费项目 -->
    <view class="pending-fees">
      <view class="section-title">
        <text class="title-text">待缴费项目</text>
        <text class="title-count">({{ pendingFees.length }})</text>
      </view>
      
      <view class="fee-list">
        <view 
          v-for="fee in pendingFees" 
          :key="fee.id" 
          class="fee-item"
          @click="goToFeeDetail(fee)"
        >
          <view class="fee-icon" :style="{ background: fee.iconColor }">
            <u-icon :name="fee.icon" color="#fff" size="20"></u-icon>
          </view>
          <view class="fee-info">
            <view class="fee-header">
              <text class="fee-title">{{ fee.title }}</text>
              <text class="fee-amount">¥{{ fee.amount.toFixed(2) }}</text>
            </view>
            <view class="fee-details">
              <text class="fee-type">{{ fee.type }}</text>
              <text class="fee-due-date">到期：{{ fee.dueDate }}</text>
            </view>
            <view class="fee-status">
              <u-tag 
                :text="fee.statusText" 
                :type="fee.statusType" 
                size="mini"
              ></u-tag>
            </view>
          </view>
          <view class="fee-action">
            <u-icon name="arrow-right" color="#999" size="16"></u-icon>
          </view>
        </view>
      </view>
    </view>

    <!-- 快速缴费 -->
    <view class="quick-payment">
      <view class="section-title">
        <text class="title-text">快速缴费</text>
      </view>
      
      <view class="quick-grid">
        <view 
          v-for="item in quickItems" 
          :key="item.id"
          class="quick-item"
          @click="quickPay(item)"
        >
          <view class="quick-icon" :style="{ background: item.color }">
            <u-icon :name="item.icon" color="#fff" size="24"></u-icon>
          </view>
          <text class="quick-name">{{ item.name }}</text>
          <text class="quick-amount">¥{{ item.amount.toFixed(2) }}</text>
        </view>
      </view>
    </view>

    <!-- 缴费统计 -->
    <view class="payment-stats">
      <view class="section-title">
        <text class="title-text">缴费统计</text>
      </view>
      
      <view class="stats-grid">
        <view class="stat-item">
          <text class="stat-number">{{ stats.totalPaid.toFixed(2) }}</text>
          <text class="stat-label">累计缴费</text>
        </view>
        <view class="stat-item">
          <text class="stat-number">{{ stats.pendingCount }}</text>
          <text class="stat-label">待缴费</text>
        </view>
        <view class="stat-item">
          <text class="stat-number">{{ stats.feeTypes }}</text>
          <text class="stat-label">费用类型</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
/**
 * 其他费用页面
 * @author Wu.Liang
 * @date 2025-01-21
 * @description 其他费用缴费功能页面，包含费用分类、待缴费项目、快速缴费等
 */

import { ref, reactive, onMounted } from 'vue'

// 费用分类
const feeCategories = ref([
  {
    id: 1,
    name: '卫生费',
    icon: 'trash',
    color: '#ff6b6b',
    count: 2
  },
  {
    id: 2,
    name: '电梯费',
    icon: 'arrow-up',
    color: '#4ecdc4',
    count: 1
  },
  {
    id: 3,
    name: '绿化费',
    icon: 'leaf',
    color: '#45b7d1',
    count: 1
  },
  {
    id: 4,
    name: '安保费',
    icon: 'shield',
    color: '#96ceb4',
    count: 1
  },
  {
    id: 5,
    name: '维修费',
    icon: 'tools',
    color: '#feca57',
    count: 0
  },
  {
    id: 6,
    name: '其他费用',
    icon: 'more',
    color: '#ff9ff3',
    count: 1
  }
])

// 待缴费项目
const pendingFees = ref([
  {
    id: 1,
    title: '2025年1月卫生费',
    amount: 25.00,
    type: '卫生费',
    dueDate: '2025-01-31',
    statusText: '待缴费',
    statusType: 'warning',
    icon: 'trash',
    iconColor: '#ff6b6b'
  },
  {
    id: 2,
    title: '2025年1月电梯费',
    amount: 15.00,
    type: '电梯费',
    dueDate: '2025-01-31',
    statusText: '待缴费',
    statusType: 'warning',
    icon: 'arrow-up',
    iconColor: '#4ecdc4'
  },
  {
    id: 3,
    title: '2024年12月绿化费',
    amount: 20.00,
    type: '绿化费',
    dueDate: '2025-01-20',
    statusText: '已逾期',
    statusType: 'error',
    icon: 'leaf',
    iconColor: '#45b7d1'
  }
])

// 快速缴费项目
const quickItems = ref([
  {
    id: 1,
    name: '卫生费',
    amount: 25.00,
    icon: 'trash',
    color: '#ff6b6b'
  },
  {
    id: 2,
    name: '电梯费',
    amount: 15.00,
    icon: 'arrow-up',
    color: '#4ecdc4'
  },
  {
    id: 3,
    name: '绿化费',
    amount: 20.00,
    icon: 'leaf',
    color: '#45b7d1'
  },
  {
    id: 4,
    name: '安保费',
    amount: 30.00,
    icon: 'shield',
    color: '#96ceb4'
  }
])

// 缴费统计
const stats = reactive({
  totalPaid: 450.00,
  pendingCount: 3,
  feeTypes: 6
})

// 页面跳转方法
const selectCategory = (category) => {
  uni.showToast({
    title: `选择${category.name}`,
    icon: 'none'
  })
}

const goToFeeDetail = (fee) => {
  uni.navigateTo({
    url: `/pages/payment/detail?feeId=${fee.id}&type=other`
  })
}

const quickPay = (item) => {
  uni.navigateTo({
    url: `/pages/payment/quick-pay?type=${item.name}&amount=${item.amount}`
  })
}

// 页面加载
onMounted(() => {
  loadOtherFeesData()
})

// 数据加载方法
const loadOtherFeesData = async () => {
  try {
    console.log('加载其他费用数据')
  } catch (error) {
    console.error('加载其他费用数据失败:', error)
  }
}
</script>

<style lang="scss" scoped>
.other-fees-page {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 16px;
  width: 100%;
  box-sizing: border-box;
}

.page-header {
  text-align: center;
  margin-bottom: 24px;
  padding: 20px 0;
  
  .header-title {
    font-size: 24px;
    font-weight: 700;
    color: #333;
    margin-bottom: 8px;
  }
  
  .header-subtitle {
    font-size: 14px;
    color: #666;
  }
}

.section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding: 0 4px;
  
  .title-text {
    font-size: 16px;
    font-weight: 600;
    color: #333;
  }
  
  .title-count {
    font-size: 14px;
    color: #999;
  }
}

.fee-categories,
.pending-fees,
.quick-payment,
.payment-stats {
  margin-bottom: 24px;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  
  .category-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 16px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    
    .category-icon {
      width: 56px;
      height: 56px;
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 12px;
    }
    
    .category-name {
      font-size: 14px;
      font-weight: 600;
      color: #333;
      margin-bottom: 4px;
      text-align: center;
    }
    
    .category-count {
      font-size: 12px;
      color: #666;
    }
  }
}

.fee-list {
  .fee-item {
    display: flex;
    align-items: center;
    padding: 16px;
    background: white;
    border-radius: 12px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    
    .fee-icon {
      width: 48px;
      height: 48px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 16px;
      flex-shrink: 0;
    }
    
    .fee-info {
      flex: 1;
      min-width: 0;
      
      .fee-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px;
        
        .fee-title {
          font-size: 16px;
          font-weight: 600;
          color: #333;
        }
        
        .fee-amount {
          font-size: 18px;
          font-weight: 700;
          color: #ff4757;
        }
      }
      
      .fee-details {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px;
        
        .fee-type,
        .fee-due-date {
          font-size: 12px;
          color: #666;
        }
      }
      
      .fee-status {
        display: flex;
        justify-content: flex-start;
      }
    }
    
    .fee-action {
      margin-left: 16px;
    }
  }
}

.quick-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  
  .quick-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 16px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    
    .quick-icon {
      width: 56px;
      height: 56px;
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 12px;
    }
    
    .quick-name {
      font-size: 14px;
      font-weight: 600;
      color: #333;
      margin-bottom: 4px;
      text-align: center;
    }
    
    .quick-amount {
      font-size: 16px;
      font-weight: 700;
      color: #ff4757;
    }
  }
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  
  .stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 16px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    
    .stat-number {
      font-size: 24px;
      font-weight: 700;
      color: #ff9500;
      margin-bottom: 8px;
    }
    
    .stat-label {
      font-size: 12px;
      color: #666;
    }
  }
}
</style>
